.H CSS 1
.BL
CSS can either be defined at specific files
(usuall called
.CW stylesheet.css )
or it can be
.B inlined ,
that is,
it can be defined directly inside the HTML element.
.CBS Telling your browser where your CSS is and inlining CSS.
<head>
	<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
	<h1 style="background=red">
	</h1>
</body>
.CBE
.BL
There are already other stylesheets that the browser applies by default.
They are the
.B user-agent
(the browser's own stylesheet)
the
.B user
(CSS styles defined by the user),
and the
.B author
(the website developer styles).
The priority order goes:
user-agent, user and author.
.BL
CSS syntax generally works in the form:
.CBS CSS syntax.
selector {
	property: value;
}
.CBE
This is called a
.B ruleset .
Rulesets are modifications that should be applied to specific HTML elements.
Elements can either be identified via their tags
.CW a , (
.CW p ,
.CW body ", etc),"
ID or class.
.CBS Example of CSS using ID, body and class.
<div id="id-name"></div>
#id-name {
	/* ... */
}

<div class="class-name"></div>
.class-name {
	/* ... */
}

/* This is a composite ruleset that applies to two tags */
a body {
	/* ... */
}
.CBE
When multiple rulesets apply to the same element,
conflicts are resolved through a priority list.
It goes:
.TD "Turn this into a numbered list"
Inlined CSS, ID, class and tag.
.SP
.BL
If there are ties between composite rulesets,
the most specific ruleset always win.
For example,
suppose two conflicting rulesets:
.CBS Conflicting CSS rulesets.
<div id="mydiv" class="myclass"></div>
div .myclass {
	background: black;
}

#mydiv {
	background: red;
}
.CBE
The
.CW div
element will have a red background.
This happens because the ID has more weight than
any of the other selectors combined.
Selectors of higher priority are considered more
specific no matter the amount of less specific selectors.
If,
nevertheless,
a tie occurs,
the ruleset last specified is applied.
.BL
There are
.B pseudo-classes
in CSS.
These are classes in CSS which trigger rulesets
when certain conditions are met.
Their syntax is
.CW "tag:pseudo-class { /* ... */ }"
.CBS CSS pseudoclass example.
/* 
   Sets the background to blue whenever the mouse
   is put above the tag <a> (the link tag)
*/
a:hover {
	background: blue;
}
.CBE
.BL
Elements can inherit styles from parent elements.
Some inheritance is already defined
(for example,
elements with tag inherit the font property from the
.CW body "element),"
but is not a complex web of inherited properites.
You can force elements to inherit properties from their parents
via the
.CW inherit
keyword.
.CBS CSS \f[CW]inherit\f[] keyword example.
<!-- This div uses inline CSS -->
<div style="background: black;">
	<div class="child-div"></div>
</div>

.child-div {
	background: inherit;
}
.CBE
In the above example,
the background of
.CW child-div
will be the same of its parent
(in this case, black).
.BL
The
.CW initial
keyword sets the CSS property to its default value.
Though care must be had with this keyword,
since some properties have the default value of
.CW none .
.CBS CSS \f[CW]initial\f[] keyword example.
body {
	font: initial;
}
.CBE
.BL
The
.CW revert
keyword acts as the
.CW inherit
keyword on inherited properties and as a
.CW revert
keyword on noninhretied properties.
Thus, it's a better alterative to the other two.
.BL
Use
.CW "@supports"
.I "at-rule"
to evaluate a ruleset under certain coniditions.
.CBS CSS \f[CW]@supports\f[] example.
/* Evaluate rulesets only if browser understands display: grid */
@supports (display: grid) {
	/* ... */
}

/* Evaluate rulesets only if browser dosen't understand display: flex */
@supports not (display: flex) {
	/* ... */
}

/* Evaluate rulesets only if browser recogonizes the specifiedselector */
@supports selector (:user-invalid) {
	/* ... */
}
.CBE
There is also support for boolean
.CW and
and
.CW or .
.BL
Use the
.CW >
child combinator operator to target
the immediate children of a selector
.CBS CSS child combinator example.
/* Ruleset only applies to applies to elements
   with the 'child' class that are immediate
   children from the div element */
div > .child {
	/* ... */
}
.CBE
.BL
It's better to avoid using absolute units when possible,
since it both simplifies the code
and improves accesibility.
For this reason,
prefer the use of
.CW ems ,
which is a unit relative to the font size
(1ems = 1 times the font size)
or
.CW rems ,
which are like ems but refer to the root font size;
that is, the size which the
.CW html
tag or the
.CW :root
pseudo-class uses.
.BL
The
.B viewport
is the visible area in the screen rendered by the browser.
CSS has specific values that target the viewport size,
they can be used to implement responsive design
using it together with the
.CW clamp()
function.
.TD Create a table containing the viewport variables
The
.CW clamp()
function receives,
in order,
a minimum value,
an expression and a maximum value.
You can use it to get responsive design in elements
when combining with viewport values.
.CBS CSS dynamic font size with \f[CW]clamp\f[] and \f[CW]\f[]
:root {
  font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.5rem);
}
.CBE
Here we have minimum and maximum values for the font,
but it also dynamically resizes it relative to the
smallest possible viewport width.
.BL
Use
.CW @media
rule to only apply rulesets when the screen size
meets specific conditions.
Thus, allowing for responsive designs.
.CBS CSS \f[CW]@media\f[] example.
/* Sets the font to 1em only on screens with width of 800px */
@media (min-width: 800px) {
	:root {
		font-size: 1em;
	}
}

/* Same as above, but for larger screens. Notice that, since it's
   defined later, it overrides the above rule when its applied */
@media (min-width: 1200px) {
	:root {
		font-size: 1.15em;
	}
}
.CBE
.BL
You can define custom properties
(also commonly known as variables)
using the notation
.CW "--var-name: value" .
And then later acceses it via the
.CW var()
function.
.CBS CSS custom properties example.
:root {
  --main-bg: #fff;
}

.panel {
	background: var(--main-bg);
}
.CBE
Custom Properties also have scope,
if you redefine them later inside an element,
all of its children will see the new definition,
but its siblings will use the values set at its parent.
.CBS CSS scoped custom properties example.
<div .class="sibling"></div>
<div .class="parent">
	<div .class="child"></div>
</div>

:root {
  --main-bg: white;
}

.parent {
	--main-bg: black;
}

.sibling {
	/* Will resolve to 'white' */
	background: var(--main-bg);
}


.child {
/* The child div will resolve to 'black' */
	background: var(--main-bg);
}
.CBE
.BL
Use the
.CW @property
.I at-rule
to better define  custom properties,
you may define types,
default values
and wheter it's subjected to inheritance.
.CBS CSS defining custom properties with \f[CW]@property\f[].
@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}
.CBE
.BL
A lot of elements have the rule
.CW "display: block"
set by default.
This is called the
.I "normal document flow" .
In it,
the child elements height define the height of the parent
and the parent's width determine the width of the children.
There are line breaks between elements
and line wraps when text overflows the width.
.BL
The
.I "double container pattern"
consists of using two containers to centralize content.
.CBS Example of double container pattern.

<!--Here the body acts as the outer container-->
<body>
	<div class="inner"></div>
</body>

:root {
	--column-width: 1080px;
}

.body {
	margin: unset;
}

.inner {
	max-width: var(--column-width);
	margin: 0 auto;
}
.CBE
In this example,
we reset the margin inside the body
(possibly set by the user),
which acts as our
.CW outer
container,
than we restrict the width inside
.CW inner ,
while also setting the margin.
Notice the use of the
.CW max-width
property,
it allows for some responsive design,
since the element will shrink in smaller screens.
.BL
The
.CW outline
property is similar to
.CW border ,
but doesn't allow different outline styles per border.
.CBS CSS \f[CW]outline\f[] property example.
.box {
	/* Draws an solid orange line around the four corners of element. */
	outline: 2px solid orange;
	
	/* Brings the outline 2px inwards, negative values bring them outwards */
	outline-offset: 2px;
}
.CBE
.BL
Text flows in different ways in other languages.
To better support them,
properties such as
.CW border-bottom
or
.CW padding-right ,
become
.CW border-block-start
and
.CW padding-inline-end .
The browser than derives the appropriate formatting
taking the language in use into consideration.
There are many of these properties,
one for each corresponding non-logical one.
Using them is a matter of how important
and encompassing should the multilanguage support be.
.BL
A useful alternative to
.CW margin
is the logical property
.CW margin-inline ,
since it allows for shorthand notation.
.CBS CSS \f[CW]margin-inline\f[] example with shorthand.
.container {
	/* Sets both the left and right margins to auto */
	margin-inline: auto;
}
.CBE
This,
and some other properties,
are the only classical properties that allow for shorthand notation.
.BL
By default,
in normal document flow,
the browser
.I collapses
sequences of margins into a single one,
equal to the size of the largest margin.
You can disable this behaviour in a number ways
(using padding, setting
.CW "display: flexbox" ,
using
.CW "overflow: auto" ,
etc).
.BL
Use the
.CW overflow
property to tell the browser what to do when the contents
overflows the element.
Out of the possible values,
the best ones are
.CW auto
(automatically show scrollbars on element overflow)
and
.CW clip
(don't show overflowed element
and don't allow for scrollbars).
This last one is more useful with smaller screens.
.BL
To avoid always having to manually add margins to elements,
use the
.I "lobotomized owl selector" :
.CW "* + * { /* rules... */ }" .
Or,
alternatively,
use
.CW ":not(:first-child) { /* rules... */ }" ,
it has the same behaviour.
Basically,
it is a ruleset that only acts on sibling elements.
To avoid it acting on the first element,
wrap it in a class
and use the direct descendant operator.
.CBS General method to avoid spacing problems.
.stack > * + * { /* or .stack > :not(:first-child)
	margin-top: 1.5em;
}
.CBE
Determine
.CW font-size
using the
.CW calc .
.CBS CSS setting \f[CW]font size\f[] with \f[CW]calc\f[].
font-size: calc(1em + 1vw);
.CBE
.BL
Suppose you have a dynamic three by three grid of items.
There will be moments in which this grid is incomplete.
To make it dynamically resize using only CSS,
we can make use of the
.CW nth-child
selector.
.CBS
/* 
  The :nth-child portion matches the last row of the grid.
  The :last-child assures we are dealing with an orphan item.
*/
li:nth-child(3n + 1):last-child {
   float: none;
   width: auto;
}

/* 
   Like the above, but styles the last element of
   rows with only two elements.
*/
li:nth-child(3n + 2):last-child {
	width: 66.666%;
}
.CBE
.
.H "Best practices"
.BL
Avoid using IDs and inline styles if possible.
Their high specificity can become a source of confusing errors.
.BL
It is better to split rulesets,
since if even one of the selectors is not supported or invalid,
the whole ruleset is not applied.
This helps with compabitility,
because if invalid rules are simply ignored.
.BL
Avoid using units with line height, it can lead to weird behaviour.
.BL
Work on the
.I outer
elements first.
That is,
elements that act as containers to other elements.
.BL
Avoid using
.B "magic numbers"
it can be difficult to maintain
and they tend to only lead to half solutions.
.BL
When working on pages using normal document flow,
globally set
.CW box-sizing
to
.CW border-box .
.CBS Setting border-box globally
*,
*::before,
*::after {
	box-sizing: border-box;
}
.CBE
This makes propertise such as
.CW padding
or
.CW width ,
apply take in consideration all boxes,
instead of only the content box.
.BL
Avoid using percentages.
To work properly,
they need to be a child of a element with dimensions set absolutely.
This can lead to repeated and difficult to maintain code.
An alternative solution to a common usage of percentage
\*[-] making elements fill up all the avaiable width \*[-]
is much better solved using viewports. 
.BL
Prefer working with the
.CW min-height
property,
instead of height directly.
It tends to be easier to maintain,
since it avoids boxes smaller than their contents.
.BL
.B
@media breakpoints are anathema to design systems .
